<template>
	<div class="mine">
		<div class="content">
			<!-- <div class="topBox">
        <div class="setBox" @click="goOther(1)">
          <img src="../../assets/images/icon13.png" alt="" />
        </div>
        <div class="innerBox">
          <van-uploader class="avatarBox" :after-read="afterRead">
            <van-image
              round
              width="50px"
              height="50px"
              fit="cover"
              :src="userInfo.img"        
            />
         
          </van-uploader>
          <p class="name">{{ userInfo.nickname }}</p>
          <p class="idTxt">{{ $t("ID") }}:{{ userInfo.user_id }}</p>
        </div>
    
    
      </div> -->
			<div class="topbox" v-if="false">
				<div class="innerBox" :src="userInfo.img">
					<van-uploader class="avatarBox" :after-read="afterRead">
						<van-image round width="50px" height="50px" fit="cover" v-if="userInfo.img" :src="userInfo.img" />
						<van-image round width="50px" height="50px" fit="cover" v-else-if="logo" :src="logo" />
					</van-uploader>
					<p class="name">{{ userInfo.nickname }}</p>
					<p class="idTxt">{{ $t("ID") }}:{{ userInfo.user_id }}</p>
				</div>
				<!-- <div class="title">{{ $t("资产") }}</div>
				<div class="total">{{ total }}<span>USD</span></div> -->
				<div class="shouyi">
					<div class="oneshouyi ">
						<span>{{ $t("可用余额") }}</span>
						<div class="shouyinum">{{ use }}</div>
					</div>
					<div class="oneshouyi" style="width: 50%;">
						<span>{{ $t("今日收益") }}</span>
						<div class="shouyinum">{{ today_shouyi }}</div>
					</div>

					<div class="oneshouyi" style="width: 50%;">
						<span>{{ $t("总收益") }}</span>
						<div class="shouyinum">{{ total_shouyi }}</div>
					</div>
				</div>
			</div>
			<div class="caozuo" v-if="false">
				<div class="onecaozuo" @click="go('recharge')">
					<img src="../../assets/images/zichan/chongzhi.png" alt="" />
					<span>{{ $t("充值") }}</span>
				</div>
				<div class="onecaozuo" @click="go('withdrawal')">
					<img src="../../assets/images/zichan/tixian.png" alt="" />
					<span>{{ $t("提现") }}</span>
				</div>
				<!-- <div class="onecaozuo" @click="go('transfer')">
        <img src="../../assets/images/zichan/duihuan.png" alt="" />
        <span>{{ $t("兑换") }}</span>
      </div> -->
			</div>
			
			
			<div class="newtop">
				<img class="ntlogo" src="../../assets/img/logos.png" alt="" />
				<div class="ntxinyong">
					<div class="ntline">
						<span>我的信用积分</span>
					</div>
				</div>
				<div class="ntjindu">
					<div class="fen">
						<span>/{{userInfo.integral}}</span>
					</div>
					<img class="jindutiao" :style="'width:' + userInfo.integral + '%'" src="../../assets/img/jindubkg.png" alt="" />
					<!-- <div class="jindutiao" :style="'background-size:' + userInfo.integral + '%'"></div> -->
				</div>
			</div>
			<div class="newswiper">
				<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" :show-indicators="false">
					<van-swipe-item v-for="(item, index) in bannerList" :key="index" class="swipeItem">
						<van-image width="100%" :src="$basePath + item.img" />
					</van-swipe-item>
				</van-swipe>
			</div>
			
			<div class="contentInner">
				<div class="itemBox" @click="goOther(1)">
					<div class="leftBox">
						<img class="img" src="../../assets/img/my1.png" alt="" />
						<p class="name">密码修改</p>
					</div>
				</div>
				<div class="itemBox" @click="goOther(7)">
					<div class="leftBox">
						<img class="img" src="../../assets/img/my6.png" alt="" />
						<p class="name">出金绑定</p>
					</div>
				</div>
				<!-- <div class="itemBox" @click="goOther(2)">
					<div class="leftBox">
						<img src="../../assets/images/mine_icon01.png" alt="" />
						<p class="name">{{ $t("实名认证") }}</p>
					</div>
					<div class="rightBox">
						{{
						  userInfo.real_name_status == 0
							? $t("未认证")
							: userInfo.real_name_status == 1
							? $t("待审核")
							: userInfo.real_name_status == 2
							? $t("已实名")
							: $t("未通过")
						}}
					</div>
				</div> -->
				<!-- <div class="itemBox" @click="goOther(3)">
				  <div class="leftBox">
					<img src="../../assets/images/mine_icon02.png" alt="" />
					<p class="name">{{ $t("高级认证") }}</p>
				  </div>
				  <div class="rightBox">{{ $t("未认证") }}</div>
				</div> -->
				<!-- <div class="itemBox" @click="goOther(4)">
					<div class="leftBox">
						<img src="../../assets/images/mine_icon03.png" alt="" />
						<p class="name">{{ $t("账变记录") }}</p>
					</div>
				</div>
				<div class="itemBox" @click="goOther(5)">
					<div class="leftBox">
						<img src="../../assets/images/mine_icon04.png" alt="" />
						<p class="name">{{ $t("极速持仓") }}</p>
					</div>
				</div>
				<div class="itemBox" @click="goOther(7)">
					<div class="leftBox">
						<img src="../../assets/images/mine_icon06.png" alt="" />
						<p class="name">{{ $t("钱包地址") }}</p>
					</div>
				</div> -->
				<!--<div class="itemBox" @click="goOther(9)">
				  <div class="leftBox">
					<img src="../../assets/images/mine_icon08.png" alt="" />
					<p class="name">{{ $t("我要分享") }}</p>
				  </div>
				</div> -->
				<div class="itemBox" @click="goOther(10)">
					<div class="leftBox">
						<img class="img" src="../../assets/img/my2.png" alt="" />
						<p class="name">{{ $t("在线客服") }}</p>
					</div>
				</div>
				<div class="itemBox" @click="goOther(11)">
					<div class="leftBox">
						<img class="img" src="../../assets/img/my3.png" alt="" />
						<p class="name">{{ $t("帮助中心") }}</p>
					</div>
				</div>
				<div class="itemBox" @click="goOther(12)">
					<div class="leftBox">
						<img class="img" src="../../assets/img/my4.png" alt="" />
						<p class="name">关于我们</p>
					</div>
				</div>
				<div class="itemBox" @click="goOut()">
					<div class="leftBox">
						<img class="img" src="../../assets/img/my4.png" alt="" />
						<p class="name">{{ $t("退出登录") }}</p>
					</div>
				</div>
				<!-- <div class="itemBox" @click="goOther(1)">
					<div class="leftBox">
						<img src="../../assets/images/mine_icon12.png" alt="" />
						<p class="name">{{ $t("设置") }}</p>
					</div>
				</div> -->
			</div>
		</div>
		<tabBar :active="3"></tabBar>
	</div>
</template>

<script>
	import tabBar from "@/components/tabBar.vue";
	export default {
		name: "mine",
		components: {
			tabBar
		},
		data() {
			return {
				logo: '',
				userInfo: {},
				config: [],
				total: "", // 总资金
				today_shouyi: "", // 当天总收益
				total_shouyi: "", // 累计总收益 
				use: 0, //可用余额
				
				bannerList: [],
			};
		},

		mounted() {
			this.init();
			this.getzichanlist();
			this.initBannersInfo();
			$postAxios(api.getService, {}, (res) => {
				this.config = res.data;
				this.logo = this.$basePath + res.data.logo_url;
			});
		},

		methods: {
			// 获取轮播图数据
			initBannersInfo() {
				$postAxios(api.getSlideList, {}, res => {
					if (res.code == 0) {
						this.bannerList = res.data;
					} else {
						this.$toast(this.$t(res.msg));
					}
				});
			},
			//资产账户
			getzichanlist() {
				$postAxios(api.getAssets, {}, (res) => {
					this.total = res.total;
					this.today_shouyi = res.today_shouyi;
					this.total_shouyi = res.total_shouyi;
					this.use = res.use;
				});
			},
			go(name) {
				if (name == "recharge") {
					this.$router.push({
						name: "recharge",
					});
				}
				if (name == "withdrawal") {
					this.$router.push({
						name: "withdrawal",
					});
				}
				if (name == "transfer") {
					this.$router.push({
						name: "transfer",
					});
				}
			},
			init() {
				$postAxios(api.getUserInfo, {}, (res) => {

					if (res.code == 0) {
						this.userInfo = res.data;
					} else {
						this.$toast(this.$t(res.msg));
					}
				});
			},
			// 上传文件前
			afterRead(file) {
				let files = new FormData();
				files.append("file", file.file);
				$uploadAxios(api.uploadImg, files, (res) => {
					if (res.code == 0) {
						let data = {
							img: res.save_path,
						};
						$postAxios(api.edituserImg, data, (res) => {
							if (res.code == 0) {
								this.init();
								this.$toast($t("上传成功"));
							} else {
								this.$toast(this.$t(res.msg));
							}
						});
					} else {
						this.$toast(this.$t(res.msg));
					}
				});
			},
			// 退出登录
			goOut(){
				$postAxios(api.loginOut, {}, (res) => {
				  if (res.code == 0) {
					window.localStorage.removeItem("token");
				    this.$toast(this.$t("退出成功"));
				    setTimeout(() => {
				        this.$router.push("/login");
				    }, 600)
				  } else {
				    this.$toast(this.$t(res.msg));
				  }
				});
			},
			// 跳转中心
			goOther(val) {
				if (val == 1) {
					// 设置中心
					this.$router.push("/setting");
				} else if (val == 2) {
					// 实名认证
					if (this.userInfo.real_name_status < 1) {
						this.$router.push("/verified");
					} else if (this.userInfo.real_name_status == 1) {
						this.$toast(this.$t("实名认证待审核中请耐心等待"));
					} else if (s.userInfo.real_name_status == 2) {
						this.$toast(this.$t("实名认证已通过"));
					}
				} else if (val == 3) {
					// 高级认证
					// this.$router.push('/setting');
				} else if (val == 4) {
					// 账变记录
					this.$router.push("/zhangbian");
				} else if (val == 5) {
					// 极速持仓
					this.$router.push("/rapidPosition");
				} else if (val == 6) {
					// 合约持仓
					this.$router.push("/contractPosition");
				} else if (val == 7) {
					// 钱包地址
					this.$router.push("/paymentMethod");
				} else if (val == 8) {
					// 银行账户
					this.$router.push("/bankCard");
				} else if (val == 9) {
					// 我要分享
					this.$router.push("/share");
				} else if (val == 10) {
					// 在线客服
					this.$router.push("/onlineService");
				} else if (val == 11) {
					// 帮助中心
					this.$router.push("/helper");
				} else if (val == 12) {
					// 平台介绍
					this.$router.push("/helperDetail?id=199");
					
					// window.open(this.config.web_url, "_blank");
				} else if (val == 13) {
					this.$router.push("/financialTradeList");
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.mine {
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 1;
		box-sizing: border-box;
		background-color: #21212b;

		.content {
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
			bottom: 54px;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;

			.contentInner {
				margin: 0 auto;
				width: 90%;
				position: relative;
				background-color: #262633;
				border-radius: 10px;

				.itemBox {
					margin: 0 10px;
					padding-right: 30px;
					height: 50px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #fff;
					box-sizing: border-box;
					background: url("../../assets/img/right.png") no-repeat 98% 50%/6px auto;

					.leftBox {
						display: flex;
						align-items: center;

						img {
							margin: 0 10px;
							width: 25px;
							height: auto;
							display: block;
						}
						.img{
							width: 14px;
							height: 14px;
						}

						.name {
							font-size: 12px;
							font-weight: 500;
						}
					}

					.rightBox {
						font-size: 12px;
						font-weight: 500;
					}

					&:nth-child(10) {
						border-bottom: none;
					}

					&:last-child {
						border-bottom: none;
					}
				}
			}

			.topBox {
				position: relative;
				// height: 200px;
				// background: url("../../assets/images/bg06.png") no-repeat center top;
				background-size: 100% auto;

				.setBox {
					position: absolute;
					right: 20px;
					top: 10px;
					width: 30px;

					img {
						display: block;
						width: 100%;
						height: auto;
					}
				}

			}
		}

		.topbox {
			width: 100%;
			// height: 170px;
			box-sizing: border-box;
			padding: 15px 0;
			background: url("../../assets/images/zichan/topbg.png") no-repeat;
			background-size: 100% 100%;

			.title {
				text-align: center;
				font-size: 14px;
				color: #ffffff;
			}

			.total {
				text-align: center;
				font-size: 14px;
				font-weight: bold;
				color: #ffffff;
				margin-bottom: 25px;
				word-break: break-all;

				span {
					font-size: 20px;
					font-weight: bold;
					color: #ffffff;
					padding-left: 4px;
				}
			}

			.shouyi {
				width: 100%;
				display: flex;
				align-content: center;
				margin-top: 25px;
				.oneshouyi {
					width: 33%;
					display: flex;
					flex-direction: column;
					align-items: center;

					span {
						font-size: 12px;
						color: #ffffff;
					}

					.shouyinum {
						font-size: 14px;
						color: #ffffff;
						font-weight: bold;
					}
				}
			}
		}

		.caozuo {
			width: 92%;
			margin: 12px auto;
			background-color: #ffffff;
			border-radius: 10px;
			display: flex;
			align-items: center;
			text-align: center;
			justify-content: center;
			box-shadow: 0px 2px 5px 0px rgb(3 3 3 / 5%);

			.onecaozuo {
				width: 33%;
				padding: 20px 0;
				display: flex;
				flex-direction: column;
				align-items: center;

				img {
					width: 44px;
					height: 42px;
				}

				span {
					font-size: 14px;
					color: #333333;
					font-weight: bold;
					padding-top: 3px;
				}
			}
		}
	}


	.innerBox {
		padding-top: 20px;

		p {
			color: #fff;
			text-align: center;
			padding: 2px;
			font-size: 14px;
		}

		.avatarBox {
			position: relative;
			margin: 0 auto 6px;
			width: 60%;
			display: flex;
			align-items: center;
			justify-content: center;

			.van-image {
				margin: 0 auto;
				width: 50px;
				display: block;
				border: 2px solid #fff;
			}

			img {
				margin: 0 auto;
				width: 50px;
				display: block;
				border-radius: 50%;
				border: 2px solid #fff;
			}
		}
	}
	.newtop{
		width: 100%;
		background: url('../../assets/img/myorderbkg.png') no-repeat 50%/cover;
		margin-bottom: 10px;
		padding: 20px 20px 30px;
		box-sizing: border-box;
		
		.ntlogo{
			width: 100px;
			height: 20px;
		}
		.ntxinyong{
			font-size: 12px;
			margin-top: 18px;
			text-align: center;
			font-weight: 700;
			color: #fff;
			
			.ntline{
				position: relative;
				font-size: 13px;
				letter-spacing: 1px;
			}
			.ntline::before{
				position: absolute;
				content: "";
				width: 33px;
				top: 50%;
				right: 87px;
				height: 1px;
				background-color: #fff;
			}
			.ntline::after{
				position: absolute;
				content: "";
				width: 33px;
				top: 50%;
				left: 86px;
				height: 1px;
				background-color: #fff;
			}
		}
		.ntjindu{
			margin-top: 24px;
			height: 9px;
			background-color: #fff;
			border-radius: 11px;
			overflow: hidden;
			position: relative;
			
			.jindutiao{
				position: absolute;
				top: 0;
				left: 0;
				z-index: 20;
				height: 9px;
			}
			.fen{
				position: absolute;
				right: 11px;
				z-index: 22;
				top: 0;
				font-size: 9px;
				line-height: 9px;
				font-weight: 700;
				color: #232323;
			}
		}
	}
	.newswiper{
		padding: 0 16px;
		box-sizing: border-box;
		border-radius: 15px;
		overflow: hidden;
		margin-bottom: 10px;
		
		::v-deep.swipeItem {
			width: 100%;
			height: 87px;
		}
		::v-deep.van-image {
			img {
				width: 100%;
				height: 87px;
				border-radius: 15px;
				// border-radius: 10px;
			}
		}
	}
</style>
